<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加科目</title>
    <link type="text/css" rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
</head>
<style text="html/css">
    /*body{*/
    /*    background-color: #00BC9B;*/
    /*}*/
    h3{
        text-align: center;
        margin-top: 50px;
    }
    #sub_name{
        margin-top: 100px;
        border: 1px solid cornflowerblue;
        width:380px;
        height: 30px;
        margin-left: 450px;
    }
    #sub_name:focus{
        outline:none;
    }
    #add_sub{
        margin-top: 50px;
        margin-left: 600px;
    }
    /*#add_sub{*/
    /*    width:100px;*/
    /*    height: 40px;*/
    /*    border: 0px;*/
    /*    !*background-color: #00b7ee;*!*/
    /*}*/


</style>
<body>
    <h3>请输入需要添加科目的名字</h3>

        <div>
            <label for="sub_name"></label>
            <input type="text" name="sub_name" id="sub_name">
        </div>
        <div>
            <button id="add_sub" class="layui-btn layui-btn-normal">提交</button>
        </div>
</body>
</html>
<script src="/jquery/jquery-3.6.0.js"></script>
<script type="text/javascript">
    layui.use('layer', function () {
        var layer = layui.layer;
        $(function () {
            $("#add_sub").on("click", function () {
                let subName = $("#sub_name").val();
                $.ajax({
                    url: "/addSubject",
                    type: "post",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    async: false,
                    cache: false,
                    data: JSON.stringify({subjectname: subName}),
                    success: function (data) {
                        if (data.success) {
                            //纯控制台打印，可做样式或者跳转界面
                            console.log(data.data);
                            layer.msg(data.data);
                        } else {
                            console.log(data.errMsg);
                            layer.msg(data.errMsg);
                        }
                    }
                })
            })
        });
    })

</script>